<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
    <script src="../../js/jquery/jquery.js"></script>
</head>
<body>

<div id="app">
    <form id="formId">
        <input type="hidden" name="id">
        名称：<input type="text" name="name"><br>
        年龄：<input type="text" name="age"><br>

        <input type="button" id="btn" @click="submitForm()" value="提交"></input>
    </form>
</div>
<script>
    var vue = new Vue({
        el:'#app',
        data:{},
        methods:{
            submitForm:function () {
                //发送异步请求，进行添加操作
                $.post("http://localhost:8080/employees/save",$('#formId').serialize(),function (data) {
                    //根据状态，进行下一步的操作
                    if (data.code == 200){
                        //操作成功，跳转回查询页面
                        window.location.href="list.html";
                    }else {
                        //失败
                        alert(data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>